<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        a:link{ text-decoration:none;}

    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation" style="position: absolute;top: 0px;left: 80px;width:-webkit-calc(100% - 200px);">
    <div class="container-fluid">
    <div class="navbar-header">
        <span style="font-size: xx-small" class="navbar-brand" >项目名称：{{ project.name }}</span>
        <a class="navbar-brand" href="/project_list/">返回项目列表</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="/apis/{{ project.id }}/">接口库</a></li>
            <li><a href="/cases/{{ project.id }}/">用例库</a></li>
            <li><a href="/project_set/{{ project.id }}/">项目设置</a></li>
            <li><a href="/global_data/{{ project.id }}/">全局变量</a></li>
        </ul>
    </div>
    </div>
</nav>
<br><br>
<table class="table table-striped">
    <thead>
        <tr>
            <th>id</th> <th style="width: 30%">接口名称</th> <th style="width: 30%">url</th> <th style="width: 350px">操作</th>
        </tr>
    </thead>
    <tbody>
         {% for i in apis %}
             <tr>
                <td>{{ i.id }}</td><td>{{ i.name }}</td> <td>{{ i.short_url }}</td>

             <td>
                <div class="btn-group" style="z-index: 0">
                     <button class="btn btn-success" onclick="ts_show('{{ i.id }}','{{ i.name }}')" >调试</button>
                     <button class="btn btn-default" onclick="open_bz('{{ i.id }}')" >备注</button>
                     <button class="btn btn-default" onclick="copy_api('{{ i.id }}')">复制</button>
                     <button class="btn btn-default" onclick="error_test('{{ i.id }}')">异常值测试</button>
                     <button class="btn btn-danger" onclick="document.location.href='/project_api_del/{{ i.id }}/'" >删除</button>
                </div>
             </td>

                 <input type="text" id="api_error_{{ i.id }}" value="{{ i.api_body }}" style="display: none">
            </tr>
        {% endfor %}
    </tbody>
</table>

<div style="text-align:center ">
    <div class="pagination">
        <span class="step-links">
            {% if apis.has_previous %}
                <a href="?page={{ apis.previous_page_number }}" aria-labe="Previous">
                    <span aria-hidden="true">&laquo;上一页</span>
                </a>&nbsp;&nbsp;
            {% endif %}
            {% for pg in apis.paginator.page_range %}
                {% if apis.number == pg  %}
                    <a href="?page={{ pg }}">第{{ pg }}页</a>&nbsp;&nbsp;&nbsp;
                {% else %}
                    <a href="?page={{ pg }}">{{ pg }}</a>&nbsp;&nbsp;
                {% endif %}
            {% endfor %}
            {% if apis.has_next %}
                <a href="?page={{ apis.next_page_number }}" aria-label="Next">
                    &nbsp;&nbsp;<span>下一页&raquo;</span>
                </a>
            {% endif %}
        </span>
    </div>
</div>





<div style="position: fixed;bottom: 0px;
width: 100%;background-color: #f8f8f8;text-align: center;
border: 1px solid #e7e7e7">
    <div class="btn-group">
        <button type="button" class="btn btn-primary" onclick="document.location.href='/project_api_add/{{ project.id }}/'">新增接口</button>
        <button type="button" onclick="project_header_div_show()" class="btn btn-default">全局请求头</button>
        <button type="button" onclick="project_host_div_show()" class="btn btn-default">全局域名</button>
        <button type="button" class="btn btn-default">接口文档导入</button>
        <button type="button" class="btn btn-default">抓包导入</button>
        <button type="button" class="btn btn-default">加密算法</button>
        <button type="button" onclick="login_show()" class="btn btn-default">登录态接口</button>
    </div>
</div>

{# 备注弹层及函数 #}
<div id="bz" style="display: none;width: 50%;height: 30%;position: fixed;left: 25%;top: 35%;background-color: #3c4043;box-shadow: 4px 4px 8px grey">
    <input id="which_api" type="text" style="display: none">
    <textarea name="" id="bz_value" style="width: 100%;height: 80%" placeholder="请输入该接口备注"></textarea>
    <button onclick="save_bz()" style="width: 49.9%;height: 20%">保存</button>
    <button onclick="close_bz()" style="width: 49.3%;height: 20%">取消</button>
</div>
<script>
    function copy_api(api_id) {
        $.get('/copy_api/',{
            'api_id':api_id
        },function (ret) {
            document.location.reload()
        })
    }
    function open_bz(id) {
        document.getElementById('bz_value').value = ''; //这是清空上一个打开的接口的内容
        $.get('/get_bz/',{
            'api_id':id
        },function (ret) {
            document.getElementById('bz').style.display='block';
            document.getElementById('which_api').value = id;
            document.getElementById('bz_value').value = ret;
        })
    }
    function save_bz() {
        id= document.getElementById('which_api').value;
        bz_value = document.getElementById('bz_value').value;
        $.get('/save_bz/',{
            'api_id' : id,
            'bz_value':bz_value
        },function (ret) {
             document.getElementById('bz').style.display='none';
        })
    }
    function close_bz() {
        document.getElementById('bz').style.display='none';
    }
</script>


{# 调试弹层及函数 #}
<div id="ts" style="display: none;border-radius:5px;width: 80%;
position: absolute;left: 10%;top: 10%;background-color: #3c4043;box-shadow: 4px 4px 8px grey;
color: white;padding-left: 10px;">
    <div class="btn-group" style="float: right">
        <button onclick="ts_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="ts_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <h4>接口: <small style="color: greenyellow" id="ts_api_id"></small>-
    <input placeholder="请在此输入接口名称" type="text" id="ts_api_name" style="padding-left: 5px;width: 30%;color: #329104">
        <select name="ts_login" id="ts_login" style="color: black;font-size:medium">
            <option value="no" id="ts_login_no">不加登陆态</option>
            <option value="yes" id="ts_login_yes">加登陆态</option>
        </select>
    </h4>
    <ul class="nav navbar-nav" style="width: 98%">
        <li>
            <select id="ts_method" style="height: 40px;" class="form-control">
                <option value="none"> 请求方式</option>
                <option value="post" > POST</option>
                <option value="get" > GET</option>
                <option value="put" > PUT</option>
                <option value="delete"> DELETE</option>
            </select>
        </li>

        <li style="width: -webkit-calc(100% - 225px)">
            <input id="ts_url" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='url: 如 /abcd/efgh/' value="">
        </li>

        <li >
            <button onclick="ts_send()" type="button"
                    style="height: 40px;width: 120px;"
                    class="btn btn-default"><span style="font-size: large">Send</span></button>
        </li>
    </ul>
    <br><br><br>
    <ul class="nav navbar-nav" style="width: 98%">
        <li style=" width: -webkit-calc(100% - 63px)">
                <datalist id="datalist_1">

                    {% for i in project_host %}
                        <option id="project_host_{{ i.id }}" value="全局域名-{{ i.id }}">{{ i.name }}：{{ i.host }}</option>
                    {% endfor %}

                    {% for i in hosts %}
                        <option id="host_{{ i.id }}" value="{{ i.host }}">{{ i.host }}</option>
                    {% endfor %}
                </datalist>
             <input list="datalist_1" autocomplete="off" id="ts_host"  style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='host: 如http(s)://xxxx.ccc.com' value="">
        </li>
         <li >
            <button type="button" onclick="ts_clear_host()"
                    style="height: 40px;width: 60px;"
                    class="btn btn-default"><span>Clear</span></button>
        </li>
    </ul>
    <br><br><br>
    <ul class="nav navbar-nav" style="width: 98%">
        <li style="width:  -webkit-calc(100% - 127px)">
             <input id="ts_header"  style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='header请求头：如{"Content":"application/json"}' value="">
        </li>
         <li >
            <button type="button" onclick="ts_clear_header()"
                    style="height: 40px;width: 60px;"
                    class="btn btn-default"><span>Clear</span></button>
             <button type="button" onclick="ts_show_project_header()"
                    style="height: 40px;width: 60px;"
                    class="btn btn-default"><span>▼️</span></button>
        </li>
        <li id="ts_project_header_li" style="display: none">
          {% for i in project_header %}
              <label style="margin-right: 5px"><input id="checkbox_{{ i.id }}" value="{{ i.id }}" type="checkbox">{{ i.name }}</label>
          {% endfor %}
        </li>
    </ul>
    <br><br><br>
    <ul id="myTab" class="nav nav-tabs" >
        <li class="active"><a id="click_none" href="#none" data-toggle="tab" >none</a></li>
        <li ><a href="#form-data" data-toggle="tab" >form-data</a></li>
        <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li>
                <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
                <li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li>
                <li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li>
                <li><a href="#Xml" tabindex="-1" data-toggle="tab">Xml</a></li>
            </ul>
        </li>

        <li ><a href="#GraphQL" data-toggle="tab" >GraphQL</a> </li>

        <li ><a href="#response" data-toggle="tab" >返回体</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="none" style="text-align: center;color: grey">
            <h3>这个请求将不会携带任何请求体</h3>
            <h5>This request will not carry any request-body</h5>
        </div>
        <div class="tab-pane fade" id="form-data">
            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="mytable" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                      <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                      </tr>
                    </thead>
                    <tbody id="mytbody">
                      <tr>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
        </div>
        <div class="tab-pane fade" id="x-www-form-urlencoded">
            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="mytable2" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                      <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                      </tr>
                    </thead>
                    <tbody id="mytbody2">
                      <tr>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="add2"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
        </div>
        <div class="tab-pane fade" id="Text">
            <textarea name="" id="raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="JavaScript">
            <textarea name="" id="raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="Json">
            <textarea name="" id="raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="Html">
            <textarea name="" id="raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="Xml">
            <textarea name="" id="raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
        </div>

         <div class="tab-pane fade" id="GraphQL">
             <table style="width: 98%">
               <thead>
                    <tr>
                        <td style="width: 55%"><span >QUERY</span></td>
                        <td style="width: 40%"><span >GRAPHQL VARIABLES</span></td>
                      </tr>
               </thead>
                <tbody style="color: black">
                  <tr>
                    <td><textarea id="body_plan_G_Q"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 99%"></textarea></td>
                    <td><textarea id="body_plan_G_G"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 100%"></textarea></td>
                  </tr>
                </tbody>
            </table>
         </div>

        <div class="tab-pane fade" id="response">
            <textarea name="" id="ts_response_body" disabled="disabled" style="background-color: #e4f3f5;color: black;width: 98%;height: 300px"></textarea>
        </div>
    </div>
    <br>
</div>
<script>
    function clear_ts_api(){
        document.getElementById('ts_api_id').innerText = '';
        document.getElementById('ts_api_name').innerText = '';
        document.getElementById('ts_method').value = 'none';
        document.getElementById('ts_url').value = '';
        document.getElementById('ts_host').value = '';
        document.getElementById('ts_header').value='{}';
        document.getElementById('ts_login').value = 'no';
        // 开始初始化请求体编码格式部分：
        document.getElementById('click_none').click() ; // 点击none子标签
        document.getElementById('mytbody').innerHTML='<tr><td></td><td></td></tr>';
        document.getElementById('mytbody2').innerHTML='<tr><td></td><td></td></tr>';
        document.getElementById('raw_Text').value = '';
        document.getElementById('raw_JavaScript').value = '';
        document.getElementById('raw_Json').value = '';
        document.getElementById('raw_Html').value = '';
        document.getElementById('raw_Xml').value = '';
        // 返回体清空：
        document.getElementById('ts_response_body').value = '';
        // 运行第三方表格插件的函数：
         $('#mytable').SetEditable({
                $addButton: $('#add'),
            });
          $('#mytable2').SetEditable({
                $addButton: $('#add2'),
            });
    }
    function ts_show(id,name) {
        //显示蒙层，并设置好蒙层的层级关系，让其在调试层之下，其他元素之上
        document.getElementById('mengceng').style.display='block';
        document.getElementById('mengceng').style.zIndex='998';
        document.getElementById('ts').style.zIndex='999';
        clear_ts_api();
        document.getElementById('ts').style.display = 'block';
        document.getElementById('ts_api_id').innerText = id;
        $.get('/get_api_data/',{
            'api_id':id,
        },function (ret) {
            console.log(ret);
            //接收返回值后的动作
            document.getElementById('ts_api_name').value = ret.name ;
            document.getElementById('ts_method').value = ret.api_method;
            document.getElementById('ts_url').value = ret.api_url;
            document.getElementById('ts_host').value = ret.api_host;
            document.getElementById('ts_header').value = ret.api_header;
            if(ret.api_login != null && ret.api_login != ''){
                document.getElementById('ts_login').value = ret.api_login;
            }
            // 公共请求头
            if(ret.public_header != null){
                var project_headers = ret.public_header.split(',');
                for(var i=0;i<project_headers.length;i++){
                    try {
                        document.getElementById('checkbox_'+project_headers[i]).checked='checked';
                    }catch (e) {

                    }
                }
            }

            // 请求体编码格式
            var body_method = '#'+ret.body_method;
            $("li a[href="+body_method+"]").click();
            // 请求体显示
            if(ret.body_method == 'Text'){
                document.getElementById('raw_Text').value = ret.api_body;
            }
            if(ret.body_method == 'JavaScript'){
                document.getElementById('raw_JavaScript').value = ret.api_body;
            }
            if(ret.body_method == 'Json'){
                document.getElementById('raw_Json').value = ret.api_body;
            }
            if(ret.body_method == 'Html'){
                document.getElementById('raw_Html').value = ret.api_body;
            }
            if(ret.body_method == 'Xml'){
                document.getElementById('raw_Xml').value = ret.api_body;
            }
            if(ret.body_method == 'form-data'){
                var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if(i<body.length-1){
                        document.getElementById('add').click()
                    }
                }
            }
            if(ret.body_method == 'x-www-form-urlencoded'){
                var tbody = document.getElementById('mytbody2'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if(i<body.length-1){
                        document.getElementById('add2').click()
                    }
                }
            }
            if(ret.body_method == "GraphQL"){
                body_plan_G_Q =  ret.api_body.split('*WQRF*')[0];
                body_plan_G_G =  ret.api_body.split('*WQRF*')[1];
                document.getElementById('body_plan_G_Q').value =body_plan_G_Q;
                document.getElementById('body_plan_G_G').value = body_plan_G_G;
            }
        })
    }
    function ts_close() {
        document.location.reload();
    }
    function ts_save() {
        // 获取所有接口设置数据
        var api_name = document.getElementById('ts_api_name').value ;
        var ts_method = document.getElementById('ts_method').value ;
        var ts_url = document.getElementById('ts_url').value ;
        var ts_host = document.getElementById('ts_host').value ;
        var ts_header = document.getElementById('ts_header').value ;
        var ts_login = document.getElementById('ts_login').value;
        var project_headers = document.getElementById('ts_project_header_li').children;
        var ts_project_headers = [];
        for(var i=0;i<project_headers.length;i++){
            if(project_headers[i].children[0].checked==true){
                ts_project_headers.push(project_headers[i].children[0].value)
            }
        }

        // 判断顶部的数据是否填充完
        if(api_name == ''){alert('请输入接口名字！');return}
        if(ts_method == 'none'){alert('请选择请求方式！');return}
        if(ts_url == ''){alert('请输入url！');return}
        if(ts_host == ''){alert('请输入host！');return}

        //判断关键数据是否符合规则
        if(ts_host.slice(0,7) != 'http://' && ts_host.slice(0,8) != 'https://' && ts_host.slice(0,4) !='全局域名' ){
            alert('host必须以http://或https://开头！');return
        }

        var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
        if(ts_body_method == 'none'){
            var ts_api_body = ''
        }
        if(ts_body_method == 'form-data'){
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if(ts_body_method == 'x-www-form-urlencoded'){
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if(ts_body_method == 'Text'){
            var ts_api_body = document.getElementById('raw_Text').value;
        }
        if(ts_body_method == 'JavaScript'){
            var ts_api_body = document.getElementById('raw_JavaScript').value;
        }
        if(ts_body_method == 'Json'){
            var ts_api_body = document.getElementById('raw_Json').value;

        }
        if(ts_body_method == 'Html'){
            var ts_api_body = document.getElementById('raw_Html').value;

        }
        if(ts_body_method == 'Xml'){
            var ts_api_body = document.getElementById('raw_Xml').value;
        }
        if(ts_body_method == 'GraphQL'){
            body_plan_G_Q = document.getElementById('body_plan_G_Q').value;
            body_plan_G_G = document.getElementById('body_plan_G_G').value;
             var ts_api_body = body_plan_G_Q+ '*WQRF*' + body_plan_G_G
        }

        var api_id = document.getElementById('ts_api_id').innerText ; //获取到了接口id

        $.get('/Api_save/',{
            'api_id':api_id,
            'api_name':api_name,
            'ts_method':ts_method,
            'ts_url':ts_url,
            'ts_host':ts_host,
            'ts_login':ts_login,
            'ts_header':ts_header,
            'ts_body_method':ts_body_method,
            'ts_api_body':ts_api_body,
            'ts_project_headers':ts_project_headers.toString(),
        },function (ret) {
            document.location.reload();
        })
    }
    function ts_send() {
        // 获取接口的所有数据
        var api_name = document.getElementById('ts_api_name').value ;
        var ts_method = document.getElementById('ts_method').value ;
        var ts_url = document.getElementById('ts_url').value ;
        var ts_host = document.getElementById('ts_host').value ;
        var ts_header = document.getElementById('ts_header').value ;
        var ts_login = document.getElementById('ts_login').value;
        var project_headers = document.getElementById('ts_project_header_li').children;
        var ts_project_headers = [];
        for(var i=0;i<project_headers.length;i++){
            if(project_headers[i].children[0].checked==true){
                ts_project_headers.push(project_headers[i].children[0].value)
            }
        }

         // 判断顶部的数据是否填充完
        if(ts_method == 'none'){alert('请选择请求方式！');return}
        if(ts_url == ''){alert('请输入url！');return}
        if(ts_host == ''){alert('请输入host！');return}

         //判断关键数据是否符合规则
        if(ts_host.slice(0,7) != 'http://' && ts_host.slice(0,8) != 'https://' && ts_host.slice(0,4) !='全局域名'){
            alert('host必须以http://或https://开头！');return
        }


        var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
        if(ts_body_method == 'none'){
            var ts_api_body = ''
        }
        if(ts_body_method == 'form-data'){
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if(ts_body_method == 'x-www-form-urlencoded'){
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if(ts_body_method == 'Text'){
            var ts_api_body = document.getElementById('raw_Text').value;
        }
        if(ts_body_method == 'JavaScript'){
            var ts_api_body = document.getElementById('raw_JavaScript').value;
        }
        if(ts_body_method == 'Json'){
            var ts_api_body = document.getElementById('raw_Json').value;
        }
        if(ts_body_method == 'Html'){
            var ts_api_body = document.getElementById('raw_Html').value;
        }
        if(ts_body_method == 'Xml'){
            var ts_api_body = document.getElementById('raw_Xml').value;
        }
        if(ts_body_method == 'GraphQL'){
            body_plan_G_Q = document.getElementById('body_plan_G_Q').value;
            body_plan_G_G = document.getElementById('body_plan_G_G').value;
             var ts_api_body = body_plan_G_Q+ '*WQRF*' + body_plan_G_G
        }

        var api_id = document.getElementById('ts_api_id').innerText ; //获取到了接口id
        // 发送请求给后台
         $.get('/Api_send/',{
            'api_id':api_id,
            'api_name':api_name,
             'ts_login':ts_login,
            'ts_method':ts_method,
            'ts_url':ts_url,
            'ts_host':ts_host,
            'ts_header':ts_header,
            'ts_body_method':ts_body_method,
            'ts_api_body':ts_api_body,
             'ts_project_headers':ts_project_headers.toString(),
        },function (ret) {
            $("li a[href=#response]").click(); //点击一下返回体按钮
            document.getElementById('ts_response_body').value = ret ;//把返回值显示到返回值多行文本框中
        })
    }
    function ts_clear_host() {
        document.getElementById('ts_host').value='';
    }
    function ts_clear_header() {
        document.getElementById('ts_header').value='';
    }
    function ts_show_project_header() {
        document.getElementById('ts_project_header_li').style.display = 'block';
    }
</script>

{# 异常值测试 #}
<div id="error_div" style="display: none;border-radius:5px;width: 80%;
position: absolute;left: 10%;top: 10%;background-color: #3c4043;box-shadow: 4px 4px 8px grey;
color: white;padding-left: 10px;">

    <div class="btn-group" style="float: right">
        <button onclick="error_play()" type="button" class="btn btn-success">开始测试</button>
        <button onclick="error_close()" type="button" class="btn btn-default">关闭</button>
    </div>

    <h4>接口：<small style="color: #0dff00" id="error_api_name"></small> 的异常值测试结果如下：</h4>

    <strong>待替换数据:(用英文逗号隔开)</strong>
    <input id="ready_error_data" type="text" style="color: black;border-radius: 5px;width: 99%"
    value="'a',123,'',' ','./?*&^','中文'"
    > <br><br>


</div>
<input type="text" id="error_api_body" style="display: none">
<script>
    function error_show_response(span_text,ret) {
        var error_div = document.getElementById('error_div'); // 声明这个请求体展示窗口
        var s = document.createElement('span'); //创造替换标题
        s.innerText = span_text;

        var t = document.createElement('textarea'); //传教替换内容多行文本
        t.style = 'width: 99%;height: 50px;border-radius: 5px;color: black;margin-bottom: 10px';
        t.value = ret;

        error_div.appendChild(s);
        error_div.appendChild(t);

    }
    function error_play() {
        api_body = document.getElementById('error_api_body').value;
        ready_error_data = document.getElementById('ready_error_data').value;
        // 获取接口id
        var api_id = document.getElementById('error_api_name').innerText ;
        //把预替换数据从一个大字符串，按逗号解析成数组。
        var r = ready_error_data.split(',');
        //判断是不是form-data/x-www...的二维数组格式
        try {
            var s = eval(api_body);
            if(s instanceof Array){
                console.log('这是数组');
                for(var i=0;i<s.length;i++){ //第一层 判断一共请求体有几个参数就进行几次大循环
                    for(var j=0;j<r.length;j++){
                        var new_body = []; //我们不能在s本尊上来回替换，所以弄了个替身，这个替身每次新的参数循环，都会重新被赋值原始s
                        $.extend(true,new_body, s);
                        new_body[i][1] = eval(r[j]);
                        console.log(new_body);
                        span_text = '替换：'+new_body[i][0]+'-->'+r[j];
                        $.get('/error_request/',{
                            'api_id':api_id,
                            'new_body':JSON.stringify(new_body),
                            'span_text':span_text
                        },function (ret) {
                            res = eval(ret);
                            error_show_response(res.span_text,res.response);
                        });
                    }
                }
            }else{
                console.log('这是none');
                alert('当前请求体不含任何内容！');
            }
        }catch (e) {
            //若不是就继续判断是不是raw-json的json串格式
            try {
                var s = JSON.parse(api_body);
                console.log('这是字典json');
                for(var i in s){
                    for(var j=0;j<r.length;j++){
                        var new_body = {};
                        $.extend(true,new_body, s);
                        new_body[i] = eval(r[j]);
                        console.log(new_body);
                        var span_text = '替换：'+i+'-->'+r[j];
                        $.get('/error_request/',{
                            'api_id':api_id,
                            'new_body':JSON.stringify(new_body),
                            'span_text':span_text
                        },function (ret) {
                            res = eval(ret);
                            error_show_response(res.span_text,res.response);
                        });
                    }
                }
            }catch (e) {
                //判断是不是graphQl测试
                try {
                    body_plan_G_Q = api_body.split('*WQRF*')[0];
                    body_plan_G_G = api_body.split('*WQRF*')[1];
                    var s = JSON.parse(body_plan_G_G);
                    for(var j=0;j<r.length;j++){
                        var new_body = {};
                        $.extend(true,new_body,s);
                        new_body[i] = eval(r[j]);
                        console.log(new_body);
                        var span_text = '替换：' + i + '-->' + r[j]
                        $.get('/error_request/',{
                            "api_id":api_id,
                            "new_body":JSON.stringify(new_body),
                            "query":body_plan_G_Q,
                            "span_text":span_text
                        },function (ret) {
                            res = eval(ret);
                            error_show_response(res.span_text,res.response)
                        });
                    }
                }catch (e) {
                    console.log(e)
                    //若也不是，那就不需要做异常值测试了
                    alert('当前接口的请求体类型不支持异常值测试！')
                }
            }
        }
    }
    function error_test(api_id) {
        var api_body = document.getElementById('api_error_'+api_id).value;

        //显示蒙层，并设置好蒙层的层级关系，让其在调试层之下，其他元素之上
        document.getElementById('mengceng').style.display='block';
        document.getElementById('mengceng').style.zIndex='998';
        document.getElementById('error_div').style.zIndex='999';
        error_clean();
        document.getElementById('error_div').style.display='block';
        document.getElementById('error_api_name').innerText = api_id;
        document.getElementById('error_api_body').value = api_body;
    }
    function error_close() {
        document.location.reload()
    }
    function error_clean() {
        document.getElementById('error_div').innerHTML = ' <div class="btn-group" style="float: right">\n' +
            '        <button onclick="error_play()" type="button" class="btn btn-success">开始测试</button>\n' +
            '        <button onclick="error_close()" type="button" class="btn btn-default">关闭</button>\n' +
            '    </div>\n' +
            '\n' +
            '    <h4>接口：<small style="color: #0dff00" id="error_api_name"></small> 的异常值测试结果如下：</h4>\n' +
            '\n' +
            '    <strong>待替换数据:(用英文逗号隔开)</strong>\n' +
            '    <input id="ready_error_data" type="text" style="color: black;border-radius: 5px;width: 99%"\n' +
            '    value="\'a\',123,\'\',\' \',\'./?*&^\',\'中文\'"\n' +
            '    > <br><br>'
    }


</script>


{# 全局请求头 #}
<div id="project_header_div" style="display: none;border-radius:5px;width: 70%;height: 70%;
position: absolute;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;
padding-left: 10px;background-color: white">
    <div class="btn-group" style="float: right">
        <button onclick="project_header_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="project_header_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <h4>请设置本项目的全局公共请求头：</h4>

    <div id="header_plan">
        {% for i in project_header %}
            <input type="text" name="header_id" value="{{ i.id }}" style="display: none;">
            <input type="text" name="header_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="请求头name"> = {"
            <input type="text" name="header_key" value="{{ i.key }}" style="width: 15%" placeholder="请求头key"> " : "
            <input type="text" name="header_value" value="{{ i.value }}" style="width: 50%" placeholder="请求头value"> "}
            <br>
        {% endfor %}
    </div>
    <br>
    <button onclick="add_project_header()">新增</button>

</div>
<script>
    function project_header_div_show() {
        document.getElementById('project_header_div').style.display = 'block';
    }
    function project_header_close() {
        document.location.reload()
    }
    function project_header_save() {
        var names = document.getElementsByName('header_name');
        var keys = document.getElementsByName('header_key');
        var values = document.getElementsByName('header_value');
        var ids = document.getElementsByName('header_id');
        var req_names= [];
        var req_keys=[];
        var req_values=[];
        var req_ids=[];
        for(var i=0;i<names.length;i++){

            req_names.push(names[i].value);
            req_keys.push(keys[i].value);
            req_values.push(values[i].value);
            req_ids.push(ids[i].value)

        }
        $.get('/save_project_header/',{
            "project_id":"{{ project.id }}",
            "req_names":req_names.toString(),
            "req_keys":req_keys.toString(),
            "req_values":req_values.toString(),
            "req_ids":req_ids.toString(),
        },function (ret) {
            document.location.reload();
        })
    }
    function add_project_header() {
        var header_plan = document.getElementById('header_plan');
        var i0 = document.createElement('input');
        i0.name = 'header_id';
        i0.value = 'new';
        i0.style.display ='none';
        var i1 = document.createElement('input');
        i1.style='width: 20%;margin-top: 3px';
        i1.placeholder='请求头name';
        i1.name='header_name';
        var i2 = document.createElement('input');
        i2.style='width: 15%';
        i2.placeholder='请求头key';
        i2.name='header_key';
        var i3 = document.createElement('input');
        i3.style='width: 50%';
        i3.placeholder='请求头value';
        i3.name='header_value';
        header_plan.appendChild(i0);
        header_plan.appendChild(i1);
        header_plan.appendChild(document.createTextNode(' = {" '));
        header_plan.appendChild(i2);
        header_plan.appendChild(document.createTextNode(' " : " '));
        header_plan.appendChild(i3);
        header_plan.appendChild(document.createTextNode(' "}'));
        header_plan.appendChild(document.createElement("br"));
    }
</script>


{# 全局域名 #}
<div id="project_host_div" style="display: none;border-radius:5px;width: 70%;height: 70%;
position: absolute;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;
padding-left: 10px;background-color: white">
    <div class="btn-group" style="float: right">
        <button onclick="project_host_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="project_host_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <h4>请设置本项目的全局公共请求头：</h4>
    <div id="host_plan">
        {% for i in project_host %}
            <input type="text" name="host_id" value="{{ i.id }}" style="display: none;">
            <input type="text" name="host_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="name"> = "
            <input type="text" name="host_host" value="{{ i.host }}" style="width: 70%" placeholder="host"> "
            <br>
        {% endfor %}
    </div>
    <br>
    <button onclick="add_project_host()">新增</button>

</div>
<script>
    function project_host_div_show() {
        document.getElementById('project_host_div').style.display = 'block';
    }
    function project_host_close() {
        document.location.reload()
    }
    function project_host_save() {
        var names = document.getElementsByName('host_name');
        var hosts = document.getElementsByName('host_host');
        var ids = document.getElementsByName('host_id');
        var req_names= [];
        var req_hosts=[];
        var req_ids=[];
        for(var i=0;i<names.length;i++){
            req_names.push(names[i].value);
            req_hosts.push(hosts[i].value);
            req_ids.push(ids[i].value)

        }
        $.get('/save_project_host/',{
            "project_id":"{{ project.id }}",
            "req_names":req_names.toString(),
            "req_hosts":req_hosts.toString(),
            "req_ids":req_ids.toString(),
        },function (ret) {
            document.location.reload();
        })
    }
    function add_project_host() {
        var host_plan = document.getElementById('host_plan');
        var i0 = document.createElement('input');
        i0.name = 'host_id';
        i0.value = 'new';
        i0.style.display ='none';
        var i1 = document.createElement('input');
        i1.style='width: 20%;margin-top: 3px';
        i1.placeholder='name';
        i1.name='host_name';
        var i2 = document.createElement('input');
        i2.style='width: 70%';
        i2.placeholder='host';
        i2.name='host_host';
        host_plan.appendChild(i0);
        host_plan.appendChild(i1);
        host_plan.appendChild(document.createTextNode(' = " '));
        host_plan.appendChild(i2);
        host_plan.appendChild(document.createTextNode(' "'));
        host_plan.appendChild(document.createElement("br"));
    }
</script>


{# 登陆态接口 #}
<div id="login_set_div" style="display: none;border-radius:5px;width: 80%;background-color: white;
position: absolute;left: 10%;top: 10%;box-shadow: 4px 4px 8px grey;padding-left: 10px">
    <div class="btn-group" style="float: right">
        <button onclick="login_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="login_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <h4>请设置该项目的登陆态接口：</h4>
    <ul class="nav navbar-nav" style="width: 98%">
        <li>
            <select id="login_method" style="height: 40px;" class="form-control">
                <option value="none"> 请求方式</option>
                <option value="post" > POST</option>
                <option value="get" > GET</option>
                <option value="put" > PUT</option>
                <option value="delete"> DELETE</option>
            </select>
        </li>

        <li style="width: -webkit-calc(100% - 225px)">
            <input id="login_url" style="color: black;padding-left: 10px;width: 100%;height: 40px;"
                   type="text" placeholder='url: 如 /abcd/efgh/' value="">
        </li>

        <li >
            <button onclick="login_send()" type="button"
                    style="height: 40px;width: 120px;"
                    class="btn btn-default"><span style="font-size: large">Send</span></button>
        </li>
    </ul>
    <br><br><br>
    <ul class="nav navbar-nav" style="width: 98%">
        <li style=" width: 100%">
             <input list="datalist_1" autocomplete="off" id="login_host"  style="color: black;
             padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='host: 如http(s)://xxxx.ccc.com' value="">
        </li>
    </ul>
    <br><br><br>
    <ul class="nav navbar-nav" style="width: 98%">
        <li style="width: 100%">
             <input id="login_header"  style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='header请求头：如{"Content":"application/json"}' value="">
        </li>
    </ul>
    <br><br><br>
    <ul id="login_myTab" class="nav nav-tabs" >
        <li class="active"><a id="login_click_none" href="#login_none" data-toggle="tab" >none</a></li>
        <li ><a href="#login_form-data" data-toggle="tab" >form-data</a></li>
        <li ><a href="#login_x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="login_myTabDrop1">
                <li><a href="#login_Text" tabindex="-1" data-toggle="tab">Text</a></li>
                <li><a href="#login_JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
                <li><a href="#login_Json" tabindex="-1" data-toggle="tab">Json</a></li>
                <li><a href="#login_Html" tabindex="-1" data-toggle="tab">Html</a></li>
                <li><a href="#login_Xml" tabindex="-1" data-toggle="tab">Xml</a></li>
            </ul>
        </li>
        <li ><a href="#login_GraphQL" data-toggle="tab" >GraphQL</a> </li>
        <li ><a href="#login_response" data-toggle="tab" >返回体</a></li>
    </ul>
    <div id="login_myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="login_none" style="text-align: center;color: grey">
            <h3>这个请求将不会携带任何请求体</h3>
            <h5>This request will not carry any request-body</h5>
        </div>
        <div class="tab-pane fade" id="login_form-data">
            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="login_mytable" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                      <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                      </tr>
                    </thead>
                    <tbody id="login_mytbody">
                      <tr>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="login_add"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
        </div>
        <div class="tab-pane fade" id="login_x-www-form-urlencoded">
            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="login_mytable2" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                      <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                      </tr>
                    </thead>
                    <tbody id="login_mytbody2">
                      <tr>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="login_add2"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
        </div>
        <div class="tab-pane fade" id="login_Text">
            <textarea name="" id="login_raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_JavaScript">
            <textarea name="" id="login_raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Json">
            <textarea name="" id="login_raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Html">
            <textarea name="" id="login_raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Xml">
            <textarea name="" id="login_raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_GraphQL">
             <table style="width: 98%">
               <thead>
                    <tr>
                        <td style="width: 55%"><span >QUERY</span></td>
                        <td style="width: 40%"><span >GRAPHQL VARIABLES</span></td>
                      </tr>
               </thead>
                <tbody style="color: black">
                  <tr>
                    <td><textarea id="login_body_plan_G_Q"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 99%"></textarea></td>
                    <td><textarea id="login_body_plan_G_G"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 100%"></textarea></td>
                  </tr>
                </tbody>
            </table>
         </div>
        <div class="tab-pane fade" id="login_response">
            <ul class="nav navbar-nav" style="width: 98%">
                <li style="width: 33%;">
                    <textarea name="" id="login_response_body" disabled="disabled"
                              style="background-color: #e4f3f5;color: black;width: 100%;height: 300px"
                               placeholder="返回体"></textarea>
                </li>
                <li style="width: 33%;">
                     <textarea name="" id="login_response_set"
                              style="color: black;width: 100%;height: 300px"
                               placeholder="若选用cookie持久化操作，请只输入cookie后保存。

若想使用登陆接口的返回值字段，请输入提取设置，=号左边写变量名，右边写绝对路径，多个用换行分开，格式例如：
sessId=/content/sessId
token=/data/token"></textarea>
                </li>
                <li style="width: 33%;">
                     <textarea name="" id="login_response_result" disabled="disabled"
                              style="background-color: #f5eeec;color: black;width: 100%;height: 300px"
                               placeholder="提取结果"></textarea>

                </li>
            </ul>
        </div>
    </div>
    <br>
</div>
<script>
    function login_show() {
        //显示蒙层，并设置好蒙层的层级关系，让其在调试层之下，其他元素之上
        document.getElementById('mengceng').style.display='block';
        document.getElementById('mengceng').style.zIndex='998';
        document.getElementById('login_set_div').style.zIndex='999';
        document.getElementById('login_set_div').style.display = 'block';
        $.get("/project_get_login/",{
            "project_id":"{{ project.id }}"
        },function (ret) {
            console.log(ret);
             // 运行第三方表格插件的函数：
            $('#login_mytable').SetEditable({
                $addButton: $('#login_add'),
            });
            $('#login_mytable2').SetEditable({
                $addButton: $('#login_add2'),
            });
            document.getElementById('login_method').value = ret.api_method;
            document.getElementById('login_url').value = ret.api_url;
            document.getElementById('login_host').value = ret.api_host;
            document.getElementById('login_header').value = ret.api_header;
            document.getElementById('login_response_set').value = ret.set;
            // 请求体编码格式
            var body_method = '#login_'+ret.body_method;
            $("li a[href="+body_method+"]").click();
            // 请求体显示
            if(ret.body_method == 'Text'){
                document.getElementById('login_raw_Text').value = ret.api_body;
            }
            if(ret.body_method == 'JavaScript'){
                document.getElementById('login_raw_JavaScript').value = ret.api_body;
            }
            if(ret.body_method == 'Json'){
                document.getElementById('login_raw_Json').value = ret.api_body;
            }
            if(ret.body_method == 'Html'){
                document.getElementById('login_raw_Html').value = ret.api_body;
            }
            if(ret.body_method == 'Xml'){
                document.getElementById('login_raw_Xml').value = ret.api_body;
            }
            if(ret.body_method == 'form-data'){
                var tbody = document.getElementById('login_mytbody'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if(i<body.length-1){
                        document.getElementById('login_add').click()
                    }
                }
            }
            if(ret.body_method == 'x-www-form-urlencoded'){
                var tbody = document.getElementById('login_mytbody2'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if(i<body.length-1){
                        document.getElementById('login_add2').click()
                    }
                }
            }
            if(ret.body_method == "GraphQL"){
                body_plan_G_Q =  ret.api_body.split('*WQRF*')[0];
                body_plan_G_G =  ret.api_body.split('*WQRF*')[1];
                document.getElementById('login_body_plan_G_Q').value =body_plan_G_Q;
                document.getElementById('login_body_plan_G_G').value = body_plan_G_G;
            }
        })
    }
    function login_close() {
        document.location.reload()
    }
    function login_save(){
        // 获取所有接口设置数据
        var login_method = document.getElementById('login_method').value ;
        var login_url = document.getElementById('login_url').value ;
        var login_host = document.getElementById('login_host').value ;
        var login_header = document.getElementById('login_header').value ;
        var login_response_set = document.getElementById('login_response_set').value;

        // 判断顶部的数据是否填充完
        if(ts_method == 'none'){alert('请选择请求方式！');return}
        if(ts_url == ''){alert('请输入url！');return}
        if(ts_host == ''){alert('请输入host！');return}

        //判断关键数据是否符合规则
        if(login_host.slice(0,7) != 'http://' && login_host.slice(0,8) != 'https://' && login_host.slice(0,4) !='全局域名' ){
            alert('host必须以http://或https://开头！');return
        }


        var login_body_method = $('ul#login_myTab li[class="active"]')[0].innerText;
        if(login_body_method == '返回体'){
            alert('请切换到请求体tab再保存！');
            return
        }

        if(login_body_method == 'none'){
            var login_api_body = ''
        }
        if(login_body_method == 'form-data'){
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            var login_api_body = JSON.stringify(login_api_body);
        }
        if(login_body_method == 'x-www-form-urlencoded'){
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            var login_api_body = JSON.stringify(login_api_body);
        }
        if(login_body_method == 'Text'){
            var login_api_body = document.getElementById('login_raw_Text').value;
        }
        if(login_body_method == 'JavaScript'){
            var login_api_body = document.getElementById('login_raw_JavaScript').value;
        }
        if(login_body_method == 'Json'){
            var login_api_body = document.getElementById('login_raw_Json').value;

        }
        if(login_body_method == 'Html'){
            var login_api_body = document.getElementById('login_raw_Html').value;

        }
        if(login_body_method == 'Xml'){
            var login_api_body = document.getElementById('login_raw_Xml').value;
        }
        if(login_body_method == 'GraphQL'){
            body_plan_G_Q = document.getElementById('login_body_plan_G_Q').value;
            body_plan_G_G = document.getElementById('login_body_plan_G_G').value;
             var login_api_body = body_plan_G_Q+ '*WQRF*' + body_plan_G_G
        }

        $.get('/project_login_save/',{
            'project_id':'{{ project.id }}',
            'login_method':login_method,
            'login_url':login_url,
            'login_host':login_host,
            'login_header':login_header,
            'login_body_method':login_body_method,
            'login_api_body':login_api_body,
            'login_response_set':login_response_set,
        },function (ret) {
            document.location.reload();
        })
    }
    function login_send() {
        // 获取接口的所有数据
        var login_method = document.getElementById('login_method').value ;
        var login_url = document.getElementById('login_url').value ;
        var login_host = document.getElementById('login_host').value ;
        var login_header = document.getElementById('login_header').value ;
        var login_response_set = document.getElementById('login_response_set').value;

         // 判断顶部的数据是否填充完
        if(login_method == 'none'){alert('请选择请求方式！');return}
        if(login_url == ''){alert('请输入url！');return}
        if(login_host == ''){alert('请输入host！');return}

         //判断关键数据是否符合规则
        if(login_host.slice(0,7) != 'http://' && login_host.slice(0,8) != 'https://' && login_host.slice(0,4) !='全局域名'){
            alert('host必须以http://或https://开头！');return
        }

        var login_body_method = $('ul#login_myTab li[class="active"]')[0].innerText;
        if(login_body_method == '返回体'){
            alert('请切换到请求体tab再保存！');
            return
        }

        if(login_body_method == 'none'){
            var login_api_body = ''
        }
        if(login_body_method == 'form-data'){
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            login_api_body = JSON.stringify(login_api_body);
        }
        if(login_body_method == 'x-www-form-urlencoded'){
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            login_api_body = JSON.stringify(login_api_body);
        }
        if(login_body_method == 'Text'){
            var login_api_body = document.getElementById('login_raw_Text').value;
        }
        if(login_body_method == 'JavaScript'){
            var login_api_body = document.getElementById('login_raw_JavaScript').value;
        }
        if(login_body_method == 'Json'){
            var login_api_body = document.getElementById('login_raw_Json').value;
        }
        if(login_body_method == 'Html'){
            var login_api_body = document.getElementById('login_raw_Html').value;
        }
        if(login_body_method == 'Xml'){
            var login_api_body = document.getElementById('login_raw_Xml').value;
        }

        if(login_body_method == 'GraphQL'){
            body_plan_G_Q = document.getElementById('login_body_plan_G_Q').value;
            body_plan_G_G = document.getElementById('login_body_plan_G_G').value;
             var login_api_body = body_plan_G_Q+ '*WQRF*' + body_plan_G_G
        }

         $.get('/project_login_send/',{
             'project_id': '{{ project.id }}',
            'login_method':login_method,
            'login_url':login_url,
            'login_host':login_host,
            'login_header':login_header,
            'login_body_method':login_body_method,
            'login_api_body':login_api_body,
            'login_response_set':login_response_set,
        },function (ret) {
            $("li a[href=#login_response]").click(); //点击一下返回体按钮
            ret = eval(ret);
            document.getElementById('login_response_body').value = ret.response ;//把返回值显示到返回值多行文本框中
             document.getElementById('login_response_result').value = ret.get_res; //把提取结果也展示到对应文本框中
        })
    }
</script>




<div id="mengceng" style="display: none;opacity:0.5;position: absolute;left: 0;top: 100px;
                          background-color: gray;width: 100%">
</div>
<script>
    document.getElementById('mengceng').style.height=window.screen.availHeight.toString()+'px';
</script>
</body>
</html>
